<template>
  <Page auto-content-height>
    <div :class="cn('bg-card h-full rounded-md')">
      222
      <VxeGrid ref="VxeGridRef" v-bind="gridOptions" class="px-4">
        <template #toolbarTools>
          <el-button type="primary" @click="VxeGridRef?.commitProxy('delete')">
            删除
          </el-button>
          <el-button type="primary" @click="VxeGridRef?.commitProxy('save')">
            保存
          </el-button>
        </template>
        <!-- 操作插槽 -->
        <template #status="">
          <el-button type="primary" @click="VxeGridRef?.commitProxy('delete')">
            删除
          </el-button>
        </template>
        <template #loading>
          <slot name="loading">
            <VbenLoading :spinning="true" />
          </slot>
        </template>
      </VxeGrid>
    </div>
  </Page>
</template>

<script lang="ts" setup>
import type { VxeGridProps } from 'vxe-table';

import { reactive } from 'vue';

import { Page } from '@vben/common-ui';
import { cn } from '@vben/utils';

import { VxeGrid } from 'vxe-table';

import { getPositionList } from '#/api/sys/position';

import { VbenLoading } from '../../../../../../../packages/@core/ui-kit/shadcn-ui/src/components/spinner';

// 组件注册

const VxeGridRef = useTemplateRef('VxeGridRef');

interface RowVO {
  id: number;
  name: string;
  nickname: string;
  role: string;
  sex: string;
  age: number;
  address: string;
}

// 模拟删除API
const delApi = (_records: any[]) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      // 删除记录处理逻辑
      resolve({ code: 200, message: '删除成功' });
    }, 100);
  });
};

// 模拟保存API
const saveApi = (_records: any[]) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      // 保存记录处理逻辑
      resolve({ code: 200, message: '保存成功' });
    }, 100);
  });
};

const gridOptions = reactive<VxeGridProps<RowVO>>({
  border: true,
  round: true,
  showOverflow: true,
  keepSource: true,
  autoResize: true,
  height: '100%',
  align: 'center',
  printConfig: {},
  importConfig: {},
  exportConfig: {},
  columnConfig: {
    resizable: true,
  },
  pagerConfig: {
    enabled: true,
    pageSize: 15,
  },
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true,
  },

  toolbarConfig: {
    refresh: true,
    import: true,
    export: true,
    print: true,
    zoom: true,
    custom: true,
    slots: {
      tools: 'toolbarTools',
    },
    buttons: [
      { name: '新增', code: 'myAdd', status: 'primary' },
      { name: '删除', code: 'remove', status: 'error' },
      { name: '保存', code: 'mySave', status: 'success' },
    ],
  },
  proxyConfig: {
    response: {
      result: 'items',
      total: 'total',
      list: 'items',
    },
    ajax: {
      // 接收 Promise
      query: async (page: any) => {
        await new Promise((resolve) => setTimeout(resolve, 1000));
        const { currentPage, pageSize } = page.page;
        return await getPositionList({ page: currentPage, pageSize });
      },

      // body 对象： { removeRecords }
      delete: ({ body }) => {
        return delApi(body.removeRecords);
      },
      // body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }
      save: ({ body }) => {
        return saveApi(body.insertRecords);
      },
    },
  },

  columns: [
    { type: 'checkbox', width: 50 },
    { type: 'seq', minWidth: 150 },
    {
      field: 'name',
      title: '名称',
      minWidth: 150,
    },
    {
      field: 'flag',
      title: '开关',
      width: 200,
      cellRender: { name: 'ElSwitch' },
    },
    {
      field: 'sort',
      title: '排序',
      minWidth: 150,
    },
    {
      field: 'createdAt',
      title: '时间',
      minWidth: 150,
    },
    {
      field: 'status',
      title: '状态',
      showOverflow: true,
      slots: {
        default: 'status',
      },
    },
  ],
});

defineExpose({
  VxeGridRef,
});
</script>
<style lang="scss">
@use './style.scss';
</style>
